<template>
  <div class="app-container">
    <el-form class="multiple-from" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item prop="xiaoquValue" label="小区名称：">
        <el-select v-model="queryParams.xiaoquValue" placeholder="请选择小区名称" clearable style="width: 170px">
          <el-option v-for="dict in xiaoquData" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="longdongValue" label="所属楼栋：">
        <el-select v-model="queryParams.longdongValue" placeholder="请选择楼栋" clearable style="width: 170px">
          <el-option v-for="dict in loudongData" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="danyuanValue" label="所属单元：">
        <el-select v-model="queryParams.danyuanValue" placeholder="请选择单元" clearable style="width: 170px">
          <el-option v-for="dict in danyuanData" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备名称：" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入设备名称"></el-input>
      </el-form-item>
      <el-form-item label="设备编号：" prop="shebeiNum">
        <el-input v-model="queryParams.shebeiNum" placeholder="请输入设备编号"></el-input>
      </el-form-item>
      <el-form-item prop="typeValue" label="当前模型:" v-if="listFlag === 0" style="margin-left: -8px;">
        <el-select v-model="queryParams.typeValue" placeholder="请选择" clearable style="width: 170px">
          <el-option v-for="dict in typeData" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div style="margin-bottom: 5px;display: flex;justify-content: space-between;">
      <div>
        <el-button :class="listFlag === 0 ? 'active' : 'unactive'" @click="checkList(0)" type="primary">住户列表</el-button>
        <el-button :class="listFlag === 1 ? 'active' : 'unactive'" @click="checkList(1)" type="primary">小区列表</el-button>
        <el-button :class="listFlag === 2 ? 'active' : 'unactive'" @click="checkList(2)" type="primary">楼栋列表</el-button>
        <el-button :class="listFlag === 3 ? 'active' : 'unactive'" @click="checkList(3)" type="primary">单元列表</el-button>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-s-operation" @click="handelYiJian">一键调控</el-button>
        <el-button type="primary" icon="el-icon-document-checked" @click="handelClickPiLiang">批量存档</el-button>
        <el-button type="primary" size="mini" icon="el-icon-search" @click="showSearch = !showSearch"></el-button>
        <el-button type="primary" size="mini" icon="el-icon-refresh-right" @click="getList"></el-button>
      </div>
    </div>

    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="2.5">
        <el-button type="primary">楼栋列表</el-button>
      </el-col>
      <el-col :span="2.5">
        <el-button type="primary">单元列表</el-button>
      </el-col>
      <el-col :span="2.5">
        <el-button type="primary">住户列表</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row> -->

    <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
      <el-table-column key="1" v-if="selectFlag" type="selection" width="55" align="center" />
      <el-table-column key="2" label="序号" align="center" type="index"></el-table-column>
      <el-table-column key="3" show-overflow-tooltip label="小区名称" align="center" prop="plotName" />
      <el-table-column key="4" v-if="listFlag === 0 || listFlag === 2 || listFlag === 3" show-overflow-tooltip label="楼栋"
        align="center" prop="buildName" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column key="5" v-if="listFlag === 0 || listFlag === 3" show-overflow-tooltip label="单元" align="center"
        prop="unit" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column key="6" v-if="listFlag === 1" show-overflow-tooltip label="楼栋数量" align="center" prop="loudongNum"
        :show-overflow-tooltip="true" />
      <el-table-column key="7" v-if="listFlag === 1 || listFlag === 2" show-overflow-tooltip label="单元数量" align="center"
        prop="danyuanNum" :show-overflow-tooltip="true" />
      <el-table-column key="8" v-if="listFlag !== 0" show-overflow-tooltip label="设备数量" align="center" prop="shebeiNum"
        :show-overflow-tooltip="true" />
      <el-table-column key="9" v-if="listFlag !== 0" show-overflow-tooltip label="设备正常数量" align="center" prop="shebeiZc"
        :show-overflow-tooltip="true" />
      <el-table-column key="10" v-if="listFlag !== 0" show-overflow-tooltip label="设备异常数量" align="center" prop="shebeiYc"
        :show-overflow-tooltip="true" />




      <el-table-column key="11" v-if="listFlag === 0" show-overflow-tooltip label="楼层" align="center" prop="floor"
        :show-overflow-tooltip="true"></el-table-column>
      <el-table-column key="12" v-if="listFlag === 0" show-overflow-tooltip label="户号" align="center"
        prop="household"></el-table-column>
      <el-table-column key="13" v-if="listFlag === 0" show-overflow-tooltip label="设备名称" align="center"
        prop="equipmentName" :show-overflow-tooltip="true" />
      <el-table-column key="14" v-if="listFlag === 0" show-overflow-tooltip label="设备编号" align="center"
        prop="equipmentCode"></el-table-column>
      <el-table-column key="15" v-if="listFlag === 0" show-overflow-tooltip label="阀门位置" align="center"
        prop="postion"></el-table-column>
      <el-table-column key="16" v-if="listFlag === 0" show-overflow-tooltip label="状态" align="center"
        prop="status"></el-table-column>
      <el-table-column key="17" show-overflow-tooltip label="供水温度" align="center" prop="gong"></el-table-column>
      <el-table-column key="18" show-overflow-tooltip label="回水温度" align="center" prop="hui"></el-table-column>
      <el-table-column key="19" show-overflow-tooltip label="开度" align="center" prop="valveOpen"></el-table-column>
      <el-table-column key="20" v-if="listFlag === 0" show-overflow-tooltip label="当前模型" align="center"
        prop="mox"></el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleDelete(scope.row)">调控</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" append-to-body>
      <el-form :model="chaobiaoParams" :rules="chaobiaoRules" ref="chaobiaoForm" size="small" :inline="true" label-position="left"
        label-width="80px">
        <el-form-item prop="fnValue" label="调控方法" style="margin-left:90px">
          <el-select v-model="chaobiaoParams.fnValue" placeholder="请选择" clearable style="width: 200px">
            <el-option v-for="dict in tiaokongData" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="chaobiaoParams.fnValue === 0" prop="faValue" label="阀门值" style="margin-left:90px">
          <el-input v-model="chaobiaoParams.faValue" placeholder="0-100"></el-input>
        </el-form-item>

        <el-form-item v-if="chaobiaoParams.fnValue === 1" label="调控策略" prop="tiaokongcelue" style="margin-left:90px">
          <el-select v-model="chaobiaoParams.tiaokongcelue" placeholder="请选择" clearable>
            <el-option v-for="dict in tiaokongCelue" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>

        <el-form-item style="margin-left:90px" v-if="chaobiaoParams.fnValue === 1 && chaobiaoParams.tiaokongcelue === 0" prop="huishuimubiao" label="回水温度目标值">
          <el-input v-model="chaobiaoParams.huishuimubiao" placeholder="30-40"></el-input>
        </el-form-item>
        <el-form-item style="margin-left:90px" v-if="chaobiaoParams.fnValue === 1 && chaobiaoParams.tiaokongcelue === 1" prop="shineiwendu" label="室内温度目标值">
          <el-input v-model="chaobiaoParams.shineiwendu" placeholder="18-30"></el-input>
        </el-form-item>
        <el-form-item style="margin-left:90px" v-if="chaobiaoParams.fnValue === 1 && chaobiaoParams.tiaokongcelue === 2" prop="gonghuishuipingjun" label="供回水平均温度">
          <el-input v-model="chaobiaoParams.gonghuishuipingjun" placeholder="18-30"></el-input>
        </el-form-item>
        <el-form-item style="margin-left:90px" v-if="chaobiaoParams.fnValue === 1 && chaobiaoParams.tiaokongcelue === 3" prop="liuliang" label="流量">
          <el-input v-model="chaobiaoParams.liuliang" placeholder="请输入流量值"></el-input>
        </el-form-item>
        <el-form-item style="margin-left:90px" v-if="chaobiaoParams.fnValue === 1 && chaobiaoParams.tiaokongcelue === 4" prop="reliang" label="热量">
          <el-input v-model="chaobiaoParams.reliang" placeholder="请输入热量值"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handelClickOk">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="存档" :visible.sync="cunDiaLog" width="500px" append-to-body>
      <el-form :model="cunForm" ref="cunForm" size="small" inline label-width="80px" :rules="cunRules" style="margin-left: 70px;">
        <el-form-item label="存档备注" prop="cunValue" style="margin-left: -10px;">
          <el-input type="textarea" v-model="cunForm.cunValue" placeholder="请输入存档备注"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cunDiaLog = false">取 消</el-button>
        <el-button type="primary" @click="handelClickCun">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type";
import data5 from "../../utils/data5.json";
import { balanceList } from "@/api/mock"

export default {
  name: "Dict",
  dicts: ['sys_normal_disable'],
  data() {
    return {
      tiaokongCelue: [
        { label: '回水温度', value: 0 },
        { label: '室内温度', value: 1 },
        { label: '供回水平均温度', value: 2 },
        { label: '流量', value: 3 },
        { label: '热量', value: 4 },
      ],
      tiaokongData: [
        { label: '手动调控', value: 0 },
        { label: '自动调控', value: 1 },
      ],
      selectFlag: false,
      listFlag: 0,
      // 存档
      cunDiaLog: false,
      cunForm: {
        cunValue: null,
      },
      cunRules: {
        cunValue: [
          { required: true, message: '请输入存档备注', trigger: 'blur' },
        ],
      },
      // 抄表
      dialogVisible: false,
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 22,
      // 小区名字
      xiaoquData: [
        { label: '小区0', value: 0 },
        { label: '小区1', value: 1 },
        { label: '小区2', value: 2 },
        { label: '小区3', value: 3 },
      ],
      loudongData: [
        { label: '楼栋0', value: 0 },
        { label: '楼栋1', value: 1 },
        { label: '楼栋2', value: 2 },
        { label: '楼栋3', value: 3 },
      ],
      danyuanData: [
        { label: '单元0', value: 0 },
        { label: '单元1', value: 1 },
        { label: '单元2', value: 2 },
        { label: '单元3', value: 3 },
      ],
      typeData: [
        { label: '模型G', value: 0 },
        { label: '模型F', value: 1 },
        { label: '模型C', value: 2 },
        { label: '模型T', value: 3 },
        { label: '模型W', value: 4 },
        { label: '模型K', value: 5 },
      ],
      // 字典表格数据
      typeList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        longdongValue: null,
        danyuanValue: null,
        xiaoquValue: null,
        typeValue: null,
        name: null,
        shebeiNum: null
      },
      chaobiaoParams: {
        fnValue: null,
        faValue: null,
        huishuimubiao:null,
        shineiwendumubiao:null,
        gonghuishuipingjun:null,
        liuliang:null,
        reliang:null,
        tiaokongcelue:null,
      },
      title: '调控',
      // 调控方式
      tiaokong: false,//false:一键调控  true:单个调控
      chaobiaoRules: {
        fnValue: [
          { required: true, message: '请选择调控方法', trigger: 'blur' },
        ],
        faValue: [
          { required: true, message: '请选择阀门值', trigger: 'blur' },
        ],
        huishuimubiao: [
          { required: true, message: '请输入回水温度目标值', trigger: 'blur' },
        ],
        shineiwendu: [
          { required: true, message: '请输入室内温度目标值', trigger: 'blur' },
        ],
        gonghuishuipingjun: [
          { required: true, message: '请输入供回水平均温度', trigger: 'blur' },
        ],
        liuliang: [
          { required: true, message: '请输入流量值', trigger: 'blur' },
        ],
        reliang: [
          { required: true, message: '请输入热量值', trigger: 'blur' },
        ],
        tiaokongcelue: [
          { required: true, message: '请选择调控策略', trigger: 'blur' },
        ],
      },
      ids: []
    };
  },
  created() {
    this.getList();
    this.xiaoquData = data5.list1
    this.loudongData = data5.list2
    this.danyuanData = data5.list3
  },
  methods: {
    // 切换列表
    checkList(num) {
      this.listFlag = num
      this.getList()
    },
    /** 查询字典类型列表 */
    getList() {
      this.loading = true;
      // listType(this.addDateRange(this.queryParams)).then(response => {
      balanceList(this.addDateRange({ ...this.queryParams, listFlag: this.listFlag })).then(response => {
        this.typeList = response.rows;
        this.total = response.total;
        this.loading = false;
      }, err => {
        this.loading = false;
      }
      );
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.dictId)
      console.log(this.ids);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 一键调控
    handelYiJian() {
      if (this.ids.length === 0) {
        this.selectFlag = !this.selectFlag
      } else {
        this.title = '一键调控'
        this.dialogVisible = true
        this.tiaokong = false
        this.resetForm('chaobiaoForm')
      }
    },
    // 批量存储
    handelClickPiLiang() {
      if (this.ids.length === 0) {
        this.selectFlag = !this.selectFlag
      } else {
        this.resetForm('cunForm')
        this.cunDiaLog = true
      }
    },
    /** 操作 */
    handleDelete(row) {
      console.log(row);
      this.title = '调控'
      this.dialogVisible = true
      this.tiaokong = true
      this.resetForm('chaobiaoForm')
    },
    // 存档确定
    handelClickCun() {
      this.$refs['cunForm'].validate((valid) => {
        if (valid) {
          this.cunDiaLog = false
        }
      })
    },
    // dialog确定
    handelClickOk() {
      this.$refs['chaobiaoForm'].validate((valid) => {
        if (valid) {
          this.dialogVisible = false
          if (this.tiaokong) {
            console.log('单个调控');
          } else {
            console.log('一键调控');
          }
        } else {
          console.log('error submit!!');
        }
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/dict/type/export', {
        ...this.queryParams
      }, `type_${new Date().getTime()}.xlsx`)
    },
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
::v-deep .el-dialog .el-form .el-form-item .el-form-item__content{
  margin: 0 !important;
}
::v-deep .el-dialog .el-form .el-form-item .el-form-item__label{
  width: 120px !important;
}
::v-deep .el-dialog .el-form-item--small.el-form-item{
  width: 390px !important;
}
::v-deep .el-form-item--small.el-form-item{
  width: 290px !important;
}
</style>
